<template>
  <div>
    <div style="height: 60px;line-height: 60px;text-align: center;float: left">
      <h1 :class="collapseCls" @click="collapse"></h1>
    </div>

    <el-breadcrumb separator="/"
                   style="height: 60px;line-height: 60px;text-align: center;float: left;margin-left: 20px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="float: right;margin-top: 20px">
      <span style="font-size: 16px">{{userName}}</span>
      <el-dropdown>
        <i class="el-icon-arrow-down" style="margin-right: 15px;margin-left: 5px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item><span @click="loadData">个人中心</span></el-dropdown-item>
          <el-dropdown-item><span @click="outLogin">退&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Header",
  data(){
    return {
      isCollapse: false,
      collapseCls: "el-icon-s-fold",
      userName:''
    }
  },
  methods: {
    collapse() {

      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.collapseCls = "el-icon-s-unfold"
      } else {
        this.collapseCls = "el-icon-s-fold"
      }
      this.$emit('collapse',this.isCollapse)
    },
    loadData(){
      console.log("方法执行了")
      this.$router.push("/userCenter")
    },
    outLogin(){
      localStorage.removeItem("userLogin")
      this.$axios.get("/user/outLogin")
      this.$router.push('/login')
    }
  },
  created() {
    let username = window.localStorage.getItem("username")
    this.userName = username.substring(1,username.length-1)
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
</style>
